<template>
  <!-- 点餐确认 -->
  <view class="page themeBga">
    <!-- 内容区 -->
    <view class="contentBox pd020">
      <view class="themeMask flex alignCenter justifyCenter pd400 mt20 border12"
        >A03桌-用餐人数 4 人</view
      >
      <view class="readBox fz24 themeMask mt20 border12">
        <view class="sumUp borderBtm flex justifyBetween">
          <view class="flex alignCenter fz28">
            <view class="flex">
              <view>已点菜品</view>
              <view class="red">*18</view>
            </view>
          </view>
          <view class="flex">
            <text class="fz28">合计：</text>
            <text class="red fz30 bold">￥999.99</text>
          </view>
        </view>
        <uv-read-more
          textIndent="0"
          show-height="450rpx"
          :toggle="true"
          closeText="展开"
        >
          <view
            class="popContent flex justifyBetween mb20"
            v-for="(item, index) in orderStore.bugList"
            :key="index"
          >
            <view class="flex alignCenter">
              <image
                class="border12 mr14"
                src=""
                style="width: 120rpx; height: 120rpx; background-color: #888"
              ></image>
              <view class="flexColumn justifyBetween">
                <view class="fz28">{{item.name }}</view>
                <view class="fz24 darkgray" style="margin: 4rpx 0"
                  >{{item.dic }}</view
                >
                <view class="red fz30">￥{{item.price }}</view>
              </view>
            </view>
            <view class="flexColumn">
              <view class="mb10">用户昵称</view>
              <!-- 步进器 -->
              <uv-number-box class="numberBox" v-model="cartNum">
                <template v-slot:minus>
                  <view class="minus">
                    <uv-icon name="minus" size="12"> </uv-icon>
                  </view>
                </template>
                <template v-slot:input>
                  <text style="text-align: center" class="input">
                    {{ cartNum }}
                  </text>
                </template>
                <template v-slot:plus>
                  <view class="plus">
                    <uv-icon name="plus" color="#FFFFFF" size="12"> </uv-icon>
                  </view>
                </template>
              </uv-number-box>
            </view>
          </view>
        </uv-read-more>
      </view>
      <view class="themeMask flexColumn pd200 mt20 border12">
        <view class="mb20 ml20">订单备注</view>
        <uv-textarea
          v-model="valueOrder"
          placeholder="请输入订单备注"
        ></uv-textarea>
      </view>
      <!-- 广告位 -->
      <view></view>
    </view>
    <!-- 底部按钮 -->
    <view class="btmBtn themeMask flex justifyBetween">
      <view class="botmBtn btnHollow border12" @click="goBack">返回加菜</view>
      <view class="botmBtn btnSolid border12" @click="goPlace">确认下单 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useOrderStore } from "../../../stores";

const orderStore = useOrderStore();

// 状态 0-点餐确认 1-订单详情
const state = ref(0);

const cartNum = ref(1);
// 跳转
const goBack = () => {
	uni.navigateBack({
		url:'/pages/core/pointMeal/pointMeal'
	})
};
const goPlace = () => {
  uni.redirectTo({
    url: "/pages/core/settle/settle",
  });
};

const goBack = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .contentBox {
    flex: 1;
    height: 100%;
    overflow: auto;
  }
  .btmBtn {
    width: 100%;
    padding: 40rpx 40rpx 60rpx 40rpx;
  }
}

// 已点菜品
.readBox {
  padding: 20rpx;
}

// 步进器
.minus {
  width: 44rpx;
  height: 44rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 6rpx;
}

.plus {
  width: 44rpx;
  height: 44rpx;
  background-color: #75301e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
